<template>
	<view>
        <!-- 轮播图 -->
		<view class="carousel-box">		
			<view class='swiper'>
				<swiper class="swiper-c" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval"
				 :duration="swiper.duration">
					 <swiper-item  v-for="(item, index) in swiper_img" :key="index" @click="clickImg(item)">
						<img class="swiper-img" :src="item.img_path" alt="">
					</swiper-item>
				</swiper>
			</view>
        </view>

		<view class="row">
            <!--基本信息-->
            <view class="mod mod-base">
                <view class="bd">
                    <view class="collect">
                        <view class="collect-img">
                            <!-- <img src="@/static/img00/shoucang.png" alt=""> -->
                            <img :src="imageList['1840459d2e99320e605727f62caffbe6']" alt="">
                        </view>  
                        
                        <span>收藏</span>
                    </view>

                    <view class="name-price-wrap inline-tag">
                        <view class="name">
                            <h2>{{info.name}}</h2>
                        </view>
                        <view class="lb-area new-lb-area">
                            <span v-for="(item, index) in info.cate_type_arr" :key="index" class="new-lbs new-lbs-bq" >{{item}}</span>
                            <!-- <span class="new-lbs new-lbs-bq" >精致小户</span> -->
                        </view>
                    </view>

                    <!-- 楼盘字典1.0--新添加-start -->
                    <!-- 楼盘字典1.0--新添加-end -->

                    <ul class="base-info">
                        <li>
                            <view class="list-l">参考总价：</view>
                            <view class="list-r total-price">

                                <span>{{info.total}}万</span>

                            </view>
                        </li>
                        <li>
                            <view class="list-l">单价：</view>
                            <view class="list-r total-price">
                                <span>{{info.price}}㎡</span></view>
                        </li>

                        <li>
                            <view class="list-l">建筑面积：</view>
                            <view class="list-r">
                                <span>{{info.area}}</span>
                            </view>
                        </li>

                        <li class="orientation">
                            <view class="list-l">房屋朝向：</view>
                            <view class="list-r">
                                <span>{{info.chao}} </span>
                            </view>
                        </li>

                        <li>
                            <view class="list-l">层高：</view>
                            <view class="list-r">
                                <span>{{info.floor}}</span>
                            </view>
                        </li>

                        <li>
                            <view class="list-l">类型：</view>
                            <view class="list-r">
                                <span>{{info.type}}</span>
                            </view>
                        </li>

                        <li class="loudong">
                            <view class="list-l">所在楼栋：</view>
                            <view class="list-r">
                                <span>{{info.building}}</span>
                            </view>
                        </li>

                    </ul>
                </view>
            </view>
        </view>


        <view class="row row-notop ab-test-b">
            <view class="mod mod-als">
                <view class="hd">
                    <h3>户型解析</h3>
                </view>
                <view class="bd">
                    <view class="als">
                        <view class="tit">居室详解</view>
                        <p>
                            {{info.view}}
                        </p>
                    </view>
                    <view class="als">
                        <view class="tit">户型分析</view>
                        <p>
                            {{info.view}}
                        </p>
                    </view>
                </view>
            </view>
        </view>

        <view class="kong"></view>

        <view class="fixed">
            <!-- <dbtk :lu="imageList"></dbtk> -->
            <view class="bottom">
            <view class="phone">
                <view class="phone-img">
                    <img :src="imageList['ceafc443d998b29d32ddb9d95f8c7f73']" alt="">
                </view>
                <p>热线咨询</p>
            </view>
            <view class="dian">我要看房</view>
            <view class="liu">咨询户型详情</view>
        </view>
        </view>
        

	</view>
</template>

<script>
    // import Dbtk from 'pages/index/type/Dbtk'

	export default {

        components: {
			// Dbtk,
		},

		data() {
			return {
				swiper: {
					indicatorDots: true,
					autoplay: true,
					interval: 3000,
					duration: 800,
                }, // 轮播图属性设置
				loupan_id:0,
                huxing_id:0,
				swiper_img:{},
                info:{},
                
                imageList:[]
            }
            
        },
     
		onLoad(e) {
            let _this = this;
            
			this.loupan_id = e.loupan_id;
			this.huxing_id = e.huxing_id;

			this.$api.getHuxingDetail({
					loupan_id:_this.loupan_id,
					huxing_id:_this.huxing_id
				},
				res => {
					_this.swiper_img = res.swiper_img;
					_this.info = res.info;

					// console.log(_this.info);

				}
            );
			this.initData();
        },
        
        
		methods: {
          initData() {
            //获取图片
            this.$api.getImage({
                ids: '1840459d2e99320e605727f62caffbe6,ceafc443d998b29d32ddb9d95f8c7f73'
			},
            res => {
                    this.imageList = res;
                    console.log(this.imageList);
                });
            }
        }
        
	}
</script>

<style scoped>
    *{
        margin: 0 ;
        padding: 0 ;
        list-style: none;
    }
	.carousel-box{
		height: 360rpx;
        width: 100%;
		background: #999;
	}
    .swiper{
         width: 100%;
        height: 360rpx;
    }
    .swiper-c{
         width: 100%;
        height: 360rpx;
    }
    swiper-item {
         width: 100%;
        height: 360rpx;
    }
    swiper-item>img{
         width: 100%;
        height: 360rpx;
    }


    .row{
        background: #fff;
    }
    .mod{
        margin: 0 40rpx 20rpx 40rpx;
        padding-top: 40rpx;
        padding-bottom: 60rpx;
    }
    .collect{
        height:68rpx;
        width: 114rpx;
        float: right;
        border-left: 1px solid #77808a;
    }
    .collect-img{
        height: 36rpx;
        width: 36rpx;
        margin: 0 auto;
    }
    .collect-img>img{
        height: 100%;
        width: 100%;
    }
    .collect>span{
        font-size: 24rpx;
        color: #77808a;
        margin-left: 30rpx;
    }
    .name-price-wrap{
        width: 600rpx;
    }
    .name{
        margin-bottom: 10rpx;
    }
    .lb-area{
        width: 600rpx;
        margin-top: 20rpx;
    }
    .new-lbs{
        margin-right: 10rpx;
        padding: 4rpx 10rpx;
        border: 1px solid #77808a;
        font-size: 24rpx;
        color:#77808a;
        border-radius: 6rpx;    
    }
    .base-info{
        margin-top: 60rpx;
        display: flex;
        flex-wrap:wrap;
    }
    .base-info>li{
        width: 49%;
        height: 60rpx;
        display: flex;
        line-height: 60rpx;
    } 
    .list-l{
        /* width: 100%; */
        color:#77808a;
    }
    .list-r{
        font-size: 30rpx;
        color: #3e4a59;
        font-weight: 550;
        overflow: hidden;  /*超出部分隐藏*/
        white-space: nowrap;  /*禁止换行*/
        text-overflow: ellipsis; /*省略号*/
    }
     .total-price{
        color: #fa5f35;
        font-size: 30rpx;
    }
    .hd{
        font-size: 30rpx;
        color: #3e4a59;
        font-weight: 700;
    }
    .bd{
        margin-top: 30rpx;
    }
    .als{
        margin-bottom: 40rpx;
        color: #3e4a59;
        font-size: 30rpx;
        font-weight: 550;
    }
    .tit{
        background: #f3f6f9;
        padding: 10rpx 10rpx;
    }
    .fixed{
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #fff;
        height: 114rpx;
    }
    .kong{
        height: 40rpx;
    }
	
	
	
	
	
 .bottom{
        display: flex;  
        justify-content:space-around    
    }
    .person,.phone{
        width: 120rpx;
        font-size: 24rpx;
        color: #3e4a59;
    }
    .phone{
        margin-top: 20rpx;
        margin-left: 40rpx;
    }
    .phone>.phone-img{
        height: 36rpx;
        width: 36rpx;   
        margin-left: 38rpx;
    }
    .phone>.phone-img>img{
        height: 36rpx;
        width: 36rpx;   
    }
    .phone>p{
        text-align: center;
    } 
    .person>img{
        height: 36rpx;
        width: 36rpx;
        margin-top: 14rpx;
        margin-left: 38rpx;
    }
    .person>p{
        text-align: center;
    }
    .dian,.liu{
        margin-top: 20rpx;
        width: 252rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
        margin-left: 20rpx;
        border-radius: 6rpx;
    }
    .dian{
        background: #13c3c3;
    }
    .liu{    
        background: #fa5f35;   
    }


    .foot {
    height: 200upx;
    background: #f3f6f9;
    margin-top:60upx;
    color: #a9bacf;
    font-size: 24upx;
    }
.foot>ul{
    list-style: none;
}
.foot>ul>li{
    text-align: center;
}
.message{
    padding-top:60upx ;
}
.message>span{
    width: 140upx;  
}
.prpo{
    padding: 40upx 40upx;
}


</style>